<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>

	<head>
		<title>-客服控制台</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引用Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script type="text/javascript" src="../js/axios.js"></script>
		<script type="text/javascript" src="../js/qs.js"></script>
		<script src="../js/xt.js"></script>
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/core.css" rel="stylesheet" type="text/css">

		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/icons.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/css.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/bs/css/bootstrap.min.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/pl/sweetalert/sweetalert.min.css" rel="stylesheet" type="text/css">
		
		<script src="js/plugins/sweetalert/sweetalert.min.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.app{
				height: 500px;
			}
			
			.app1 {
				width: 60%;
				float: left;
				border: 1px solid gainsboro;
				border-radius: 10px;
				padding: 10px;
				margin-left: 20px;
			}
			
			.app2 {
				width: 35%;
				padding: 10px;
				float: right;
				margin-right: 20px;
				border: 1px solid gainsboro;
				border-radius: 10px;
			}
			
			.border-t-a {
				margin-bottom: 20px;
			}
		</style>
	</head>

	<body>
		<div id="app" class="app">
			<div id="app1" class="app1">
				<h3 style="text-align: center;">客户维修</h3>
				<hr class="border-t-a">
				<el-form ref="form" :model="form" :rules="rules" label-width="100px">

					<el-form-item label="维修主题：" prop="theme">
						<el-input v-model="form.theme"></el-input>
					</el-form-item>

					<el-form-item label="对应客户：" prop="custname">
						<el-col :span="10">
							<el-form-item>
								<el-input v-model="form.custname" disabled></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="2">&nbsp;</el-col>
						<el-col :span="10">
							<el-autocomplete class="inline-input" v-model="form.custname" :fetch-suggestions="querySearch" placeholder="请输入客户名字" :trigger-on-focus="false" @select="handleSelect">
								<template slot-scope="{ item }">
									<div class="name">{{ item.cus_name }}({{ item.cus_company }})</div>
								</template>
							</el-autocomplete>
						</el-col>
					</el-form-item>

					<el-form-item label="联系人：">
						<el-col :span="12">
							<el-form-item prop="linId">
								<el-select v-model="form.linName" @change="handleSelect1">
									<el-option v-for="item in customertoman" :key="item.linId" :label="item.linName" :value="item.linId"></el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="联系电话:" prop="phone">
								<el-input v-model="form.phone"></el-input>
							</el-form-item>
						</el-col>
					</el-form-item>

					<el-form-item label="对应订单：">
						<el-col :span="12">
							<el-form-item>
								<el-select v-model="form.orderName" @change="order">
									<el-option v-for="item in orders" :key="item.o_id" :label="item.otitle" :value="item.o_id"></el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="维修产品：">
								<el-select v-model="form.goodname" @change="good">
									<el-option v-for="item in goods" :key="item.goo_id" :label="item.goo_name" :value="item.goo_id"></el-select>
							</el-form-item>
						</el-col>
					</el-form-item>

					<el-form-item label="维修类型:">
						<el-col :span="12">
							<el-form-item prop="cat">
								<el-select v-model="form.cat">
									<el-option label="保养" :value="451" :key="451"></el-option>
									<el-option label="安装" :value="452" :key="452"></el-option>
									<el-option label="升级" :value="453" :key="453"></el-option>
									<el-option label="维修" :value="454" :key="454"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<i class="el-icon-info"></i>{{form.isTimeout}}
						</el-col>
					</el-form-item>

					<el-form-item label="维修日期：">
						<el-col :span="12">
							<el-form-item prop="date1">
								<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" :picker-options="pickerOptions1" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
								<el-button icon="el-icon-search" circle @click="queryWork()"></el-button>
							</el-form-item>

						</el-col>
						<el-col :span="12">
							<el-form-item label="接单人:">
								${username}
							</el-form-item>
						</el-col>
					</el-form-item>

					<el-form-item label="承接部门：">
						<el-col :span="12">
							<el-form-item prop="dept">
								<el-select v-model="form.dept" @change="dept">
									<el-option v-for="item in depts" :key="item.dep_id" :label="item.dep_name" :value="item.dep_id"></el-select>
								</el-select>

							</el-form-item>
						</el-col>
						<el-col :span="12" prop="user">
							<el-form-item label="维修人员：">
								<el-select v-model="form.user">
									<el-option v-for="item in users" :key="item.use_id" :label="item.use_name" :value="item.use_id"></el-select>
								</el-select>
							</el-form-item>
						</el-col>
					</el-form-item>

					<el-form-item label="维修金额:">
						<el-col :span="12">
							<el-form-item>
								<el-radio-group v-model="form.isMoney" @change="isMoney">
									<el-radio :label="1">收费维修</el-radio>
									<el-radio :label="2">免费维修</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>

						<el-col :span="12">
							<el-form-item prop="money" label="维修金额:">
								<el-input v-model="form.money"></el-input>
							</el-form-item>
						</el-col>
					</el-form-item>
					<el-form-item label="联系地址:">
						<el-col :span="8">
					<el-select v-model="sheng" @change="choseProvince" placeholder="省级地区">
						<el-option v-for="item in province" :key="item.id" :label="item.value" :value="item.id">
						</el-option>
					</el-select>
						</el-col>
						<el-col :span="8">
					<el-select v-model="shi" @change="choseCity" placeholder="市级地区">
						<el-option v-for="item in shi1" :key="item.id" :label="item.value" :value="item.id">
						</el-option>
					</el-select>
					</el-col>
					<el-col :span="8">
					<el-select v-model="qu" @change="choseBlock" placeholder="区级地区">
						<el-option v-for="item in qu1" :key="item.id" :label="item.value" :value="item.id">
						</el-option>
					</el-select>
					</el-col>
					<el-input  v-model="form.input" width="80px">
				</el-form-item>
					<el-form-item label="派工内容">
						<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="form.desc"></el-input>
					</el-form-item>
					<el-form-item>
						<el-col :span="8"></el-col>
						<el-col :span="8">
							<el-button @click="resetForm('form')">重置</el-button>
							<el-button type="primary" @click="submitForm('form')">立即创建</el-button>
						</el-col>
						<el-col :span="8"></el-col>
					</el-form-item>
				</el-form>
			</div>

			<div class="app2" id="app2">
				<p><i class="fa fa-search m-r-5"></i>QA（问题和回答）</p>

				<el-row :gutter="20">
					<el-col :span="20">
						<el-input placeholder="请输入内容" v-model="input10" clearable>
							<el-button type="info" slot="append" @click="query">查询</el-button>
						</el-input>
					</el-col>

				</el-row>

				<p class="m-t-10">
					<a href="/getQAty" target="_parent" class="btn btn-d">QA内容维护</a>
				</p>
				<div style="width:100%; height:130px;overflow:auto;">

					<div id="qaserchview1" :style="mydiv1">
						<font color="#999999">QA全文检索注意事项：<br><b>1</b>.关键字不能太普遍，比如查询“的”，可能很多QA条目中都有这个字，自动过滤，不返回查询结果<br><b>2</b>.查询关键字可以多些，全文检索会拆分匹配<br><b>3</b>.QA表内的数据如少于3条，无法实现全文检索</font>
					</div>
					<div id="qaserchview2" :style="mydiv2">
						<p @click="queryMore(i)" v-for="(qa,i) in qas">
							<i class="fa  fa-circle text-gray m-r-5"></i>
							<a href="javascript:qaserchview_click_show('1');" class="text-black">{{qa.qa_name}}</a>
						</p>

					</div>

				</div>
				<div id="qashow" :style="mydiv3">
					<div class="bootstrap-table m-t-10">
						<div class="fixed-table-container">
							<table class="table table-bordered table-hover">
								<thead>
									<tr>
										<td class="th-inner" colspan="4">
											<a class="btn btn-d btn-xs" @click="addMsg()">把该问题加入客服记录</a>
										</td>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td class="text-right">
											问题:
										</td>
										<td colspan="3">
											{{wenti}}
										</td>
									</tr>
									<tr>
										<td class="text-right">
											解答：
										</td>
										<td colspan="3">

											<p><b>{{jieda}}</b><br></p>
										</td>
									</tr>
									<tr>
										<td class="text-right">
											提示：
										</td>
										<td colspan="3">

										</td>
									</tr>
									<tr>
										<td style="width: 25%" class="text-right">
											使用次数：
										</td>
										<td style="width: 25%">
											{{count}}
										</td>
										<td style="width: 25%" class="text-right">
											分类：
										</td>
										<td style="width: 25%">
											{{type}}
										</td>
									</tr>
								</tbody>
								<tfoot>
									<tr>
										<td colspan="4">
											<a class="btn btn-d btn-xs" @click="addMsg()">把该问题加入客服记录</a>
											<p></p>
										</td>
									</tr>
								</tfoot>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			var vms = new Vue({
				el: "#app",
				data() {
					return {
						mapJson: '../json/map.json',
						province: '',
						sheng: '',
						shi: '',
						shi1: [],
						qu: '',
						qu1: [],
						city: '',
						block: '',
						goods: [], //维修产品
						customertoman: [], //联系人
						orders: [], //订单
						depts: [], //部门
						users: [], //员工
						pickerOptions1: {
							disabledDate(time) {
								return time.getTime() < Date.now() - 8.64e7;
							}
						},
						input10: '',
						qas: [],
						wenti: "",
						jieda: '',
						count: '',
						type: '',
						qaid: '',
						mydiv1: {
							display: 'block'
						},
						mydiv2: {
							display: 'none'
						},
						mydiv3: {
							display: 'none'
						},
						form: {
							theme: '',
							custname: '',
							custid: '',
							goodname: '',
							goodid: '',
							order: '',
							orderName: '',
							isMoney: 1,
							dept: '',
							date1: '',
							user: '',
							linId: '',
							linName: '',
							phone: '',
							money: '',
							cat: '',
							address: '',
							address1: '',
							address2: '',
							address3: '',
							desc: '',
							id: '',
							restaurants: [],
							isTimeout: '', //查询商品是否过期
						},
						rules: {
							theme: [{
								required: true,
								message: '请输入主题名称',
								trigger: 'blur'
							}],
							cat: [{
								required: true,
								message: '维修类型不能为空',
								trigger: 'change'
							}],
							date1: [{
								//type: 'date',
								required: true,
								message: '选择日期时间',
								trigger: 'change'
							}],
							dept: [{
								required: true,
								message: '承接部门不能为空',
								trigger: 'change'
							}],
							custname: [{
								required: true,
								message: '对应客户不能为空',
								trigger: 'blur'
							}],
							user: [{
								required: true,
								message: '维修人员不能为空',
								trigger: 'change'
							}],
							phone: [{
									required: true,
									message: '不能为空',
									trigger: 'change'
								},
								{
									min: 11,
									max: 11,
									message: '电话格式错误',
									trigger: 'blur'
								},
								{
									pattern: /^1(3|4|5|7|8)\d{9}$/,
									message: '手机号格式错误'
								}
							],
							money: [{
									required: true,
									message: '不能为空',
									trigger: 'blur'
								},
								{
									pattern: /^[0-9]\d*$/,
									message: '金额格式错误'
								}
							],
							address: [{
								required: true,
								message: '地址不能为空',
								trigger: 'change'
							}],
							linId: [{
								required: true,
								message: '联系人不能为空',
								trigger: 'change'
							}]
						}
					}
				},
				methods: {
					//queryString实时的文本框的值,cb回调函数
					querySearch: function(queryString, cb) {
						var allarr = this.form.restaurants;
						// console.info(allarr);

						var newsarr = [];
						allarr.forEach(v => {
							var strs = v.cus_name + "";
							if(strs.indexOf(queryString) >= 0) {
								newsarr.push(v);
								//console.info(strs);
								//console.info(v);
							}
						})
						// 调用 callback 返回建议列表的数据
						cb(newsarr);
					},
					submitForm(formName) {
						this.form.address = this.form.address1 +this.form.address2 +this.form.address3 + this.form.input;
						//验证方法
						this.$refs[formName].validate((valid) => {
							if(valid) {
								//post提交数据
								axios.post("/weixiuform",
									//参数转换
									Qs.stringify(this.form, {
										arrayFormat: 'brackets'
									})
								).then(function(v) {
									
									if(v.data == true){
									window.parent.location.href = "/getWeixiuty";
									}else{
										window.parent.parent.location.href = "/getErrorty";
									}
								}).catch(function(e) {
									
								});

							} else {
								console.log('error submit!!');
								return false;
							}
						});

					},
					resetForm(formName) {
						this.$refs[formName].resetFields();
					},
					handleSelect: function(it) {
						this.form.custname = it.cus_name;
						this.form.custid = it.cus_id;
						var iosnn = this;

						//根据客户查询联系人
						axios.post("/onSale/findByCoustomerName",
							//参数转换
							Qs.stringify({
								'custid': this.form.custid
							}, {
								arrayFormat: 'brackets'
							})
						).then(function(v) {
							iosnn.customertoman = v.data.custo;
							//console.info(v.data.custo);
						}).catch(function(e) {
							alert("出错了" + e);
						});

						//查询客户对应的订单
						//queryGoods(this.form.custid);
						axios.post("/afterSale/queryOrder",
							//参数转换
							Qs.stringify({
								'custid': this.form.custid
							}, {
								arrayFormat: 'brackets'
							})
						).then(function(v) {
							if(v.data.length == 0) {
								iosnn.form.custname = '';
								iosnn.customertoman = '';
								iosnn.form.restaurants = '';
								iosnn.form.orders = '';
								iosnn.goods = '';
								iosnn.form.goodName = '';
								iosnn.form.orderName = '';
								swal("提示", "该客户没有订单！", "warning");
							} else {
								iosnn.orders = v.data;
							}
						}).catch(function(e) {
							alert("出错了" + e);
						});

					},
					handleSelect1: function(it) {
						//alert(it);
						let obj = {};
						obj = this.customertoman.find((item) => { //this.ruleForm
							return item.linId === it; //筛选出匹配数据
						});
						this.form.linName = obj.linName;
						this.form.linId = it;
						//console.log(obj);
					},
					order: function(it) { //查询订单对应的产品
						var iosnn = this;
						/*let obj = {};
   						obj = this.orders.find((item)=>{//this.ruleForm
    					return item.o_id === it;//筛选出匹配数据
						});
						
						this.form.orderName = obj.otitle;
						this.form.order = it;*/

						alert(it);
						this.form.order = it;
						axios.post("/afterSale/queryGoods",
							//参数转换
							Qs.stringify({
								'oid': it
							}, {
								arrayFormat: 'brackets'
							})
						).then(function(v) {
							//console.info(v.data);

							iosnn.goods = v.data;
						}).catch(function(e) {
							//alert("出错了" + e);
						});
					},
					good: function(it) { //对应产品

						//alert(it);
						this.form.goodid = it;
						/*let obj = {};
   						obj = this.goods.find((item)=>{//this.ruleForm
    					return item.goo_id === it;//筛选出匹配数据
						});
						
						this.form.goodname = obj.goo_name;
						this.form.goodid = it;*/

						//	alert("我要去判断是否在保质期内");
						//判断商品是否过了保质期
						var iosnn = this;
						axios.post("/afterSale/isTimeout",
							//参数转换
							Qs.stringify({
								'gid': it,
								'oid': iosnn.form.order
							}, {
								arrayFormat: 'brackets'
							})
						).then(function(v) {
							console.info(v.data);
							if(v.data == true) {
								iosnn.form.isTimeout = "该商品在保质期内。"
							} else {
								iosnn.form.isTimeout = "该商品超出保质期。"
							}
						}).catch(function(e) {
							//alert("出错了" + e);
						});
					},
					dept: function(it) { //部门对应的员工
						var iosnn = this;
						axios.post("/afterSale/queryUser",
							//参数转换
							Qs.stringify({
								'depid': it
							}, {
								arrayFormat: 'brackets'
							})
						).then(function(v) {
							console.info(v.data);
							iosnn.users = v.data;
						}).catch(function(e) {
							//alert("出错了" + e);
						});
					},
					isMoney: function(it) { //是否收费
						//alert(it);
						if(it == 2) {
							this.form.money = 0;
						} else {
							this.form.money = '';
						}
					},
					queryWork() { //查询员工当天的工作量
						axios.post("/afterSale/setsession",
							//参数转换
							Qs.stringify(this.form, {
								arrayFormat: 'brackets'
							})
						).then(function(v) {
							window.location.href = "/getWeixiuTablety2";
						}).catch(function(e) {
							alert("出错了" + e);
						});

					},
					query() {
						var isson = this;
						//post提交数据
						axios.post("/queryMesssageQa",
							//参数转换
							Qs.stringify({
								"msg": this.input10
							}, {
								arrayFormat: 'brackets'
							})

						).then(function(v) {
							isson.qas = v.data;
							console.log(v.data);
							isson.mydiv1.display = 'none';
							isson.mydiv2.display = 'block';
							isson.mydiv3.display = 'none';
						}).catch(function(e) {
							//alert("出错了" + e);
						});
					},
					queryMore(i) {
						var news = this.qas[i];
						console.log(news);
						this.wenti = news.qa_name;
						this.jieda = news.qa_anwser;
						this.count = news.qa_count;
						this.type = news.qa_type;
						this.qaid = news.qa_id;
						this.mydiv3.display = 'block';
					},
					addMsg() {
						this.form.theme = this.form.theme + this.wenti + ",";
						this.form.desc = this.form.desc + this.jieda + ",";
						var isson = this;
						axios.post("/addQaCount",
							//参数转换
							Qs.stringify({
								"qaid": this.qaid
							}, {
								arrayFormat: 'brackets'
							})

						).then(function(v) {
							console.log(v);
							isson.count = isson.count + 1;

						}).catch(function(e) {
							//alert("出错了" + e);
						});

					},// 加载china地点数据，三级
					getCityData: function() {
						var that = this
						axios.get(this.mapJson).then(function(response) {
							if(response.status == 200) {
								var data = response.data
								that.province = []
								that.city = []
								that.block = []
								// 省市区数据分类
								for(var item in data) {
									if(item.match(/0000$/)) { //省
										that.province.push({
											id: item,
											value: data[item],
											children: []
										})
									} else if(item.match(/00$/)) { //市
										that.city.push({
											id: item,
											value: data[item],
											children: []
										})
									} else { //区
										that.block.push({
											id: item,
											value: data[item]
										})
									}
								}
								// 分类市级
								for(var index in that.province) {
									for(var index1 in that.city) {
										if(that.province[index].id.slice(0, 2) === that.city[index1].id.slice(0, 2)) {
											that.province[index].children.push(that.city[index1])
										}
									}
								}
								// 分类区级
								for(var item1 in that.city) {
									for(var item2 in that.block) {
										if(that.block[item2].id.slice(0, 4) === that.city[item1].id.slice(0, 4)) {
											that.city[item1].children.push(that.block[item2])
										}
									}
								}
							} else {
								//console.log(response.status)
							}
						}).catch(function(error) {
							//console.log(typeof + error)
						})
					},
					// 选省
					choseProvince: function(e) {
						for(var index2 in this.province) {
							if(e === this.province[index2].id) {
								//console.log(this.province[index2].id) //你选择的省级编码
								//console.log(this.province[index2].value) //省级编码 对应的汉字 
								this.shi1 = this.province[index2].children
								this.shi = this.province[index2].children[0].value
								this.qu1 = this.province[index2].children[0].children
								this.qu = this.province[index2].children[0].children[0].value
								this.E = this.qu1[0].id
								this.form.address1 = this.province[index2].value;
							}
						}
					},
					// 选市
					choseCity: function(e) {
						for(var index3 in this.city) {
							if(e === this.city[index3].id) {
								this.qu1 = this.city[index3].children
								this.qu = this.city[index3].children[0].value
								this.E = this.qu1[0].id
								this.form.address2 = this.city[index3].value;
							}
						}
					},
					// 选区
					choseBlock: function(e) {
						for(var index3 in this.block) {
							if(e === this.block[index3].id) {
								this.form.address3 = this.block[index3].value;
								console.log(this.form.address3);
							}
						}
						this.E = e;
						
					},
				},
				created: function() {
					this.getCityData()

				},
				mounted() {
					var dic = ${
						dictionaryitem
					};
					//console.log(dic); 
					var mas = ${
						mansitem
					};
					this.form.restaurants = mas;
					//console.log(this.form.restaurants); 
					//维修部
					var dept = ${
						dept
					};
					this.depts = dept;
					//console.log(dept);

					//判断是否为第二次进入
					if(JSON.stringify(${
							service
						}) != '{}') {
						var news = ${
							service
						};
						this.form.custname = news.cus_name;
						this.form.custid = news.cus_id;
						this.handleSelect(news);
					}


					if(JSON.stringify(${
							order
						}) != '{}') {
						var news = ${
							order
						};
						this.form.order = news.o_id;
						this.form.orderName = news.otitle;
					}
						
					if(JSON.stringify(${
							good
						}) != '{}') {
						var news = ${
							good
						}
						this.goods = news;
						this.form.goodid = news.goo_id;
						this.form.goodname = news.goo_name;
						this.good(news.goo_id);
					}
						
					//判断是否为第二次进入
					if(JSON.stringify(${weixiuLess}) != '{}') {
						//console.log(weixiuLess.goods);
					
						var weixiuLess = ${weixiuLess};
						this.form.theme = weixiuLess.theme;
						this.form.custname = weixiuLess.custname;
						this.form.custid = weixiuLess.custid;
						this.form.date1 = weixiuLess.date1;
						
						this.form.orderName = weixiuLess.order[0].otitle;
						this.form.order = weixiuLess.order[0].o_id;
						
						
						this.form.goodid = weixiuLess.order[0].goodid;
						this.form.goodname = weixiuLess.order[0].goodname;
						
						
						this.form.linId = weixiuLess.order[0].linId;
						this.form.linName = weixiuLess.order[0].linName;
						
						this.form.phone = weixiuLess.phone;
						this.form.isTimeout = weixiuLess.isTimeout;
						
						this.form.cat = weixiuLess.cat;
						this.form.desc = weixiuLess.desc;
						this.form.catName = weixiuLess.catName;
						console.log(weixiuLess);
					} 

				}
			});
		</script>

	</body>

</html>